.sp_icon {
  width: 60px;
  height: 60px;
  background-size: 100% auto;
  display: block;
  cursor: pointer;
}

.sp_icon:hover {
  animation: sp_icon 0.4s steps(16) forwards;
}

.sp_icon:not(:hover) {
  animation: sp_icon_reverse 0.4s steps(16) forwards;
}

@keyframes sp_icon {
  from {
    background-position-y: 0;
  }

  to {
    background-position-y: -960px;
  }
}

@keyframes sp_icon_reverse {
  from {
    background-position-y: -960px;
  }
  to {
    background-position-y: 0;
  }
}

.sp_cloud {
  background-image: url('@/assets/images/spirit_icons_pro/Cloud.png');
}
.sp_clock {
  background-image: url('@/assets/images/spirit_icons_pro/Clock.png');
}
.sp_video {
  background-image: url('@/assets/images/spirit_icons_pro/Video.png');
}

.sp_code {
  background-image: url('@/assets/images/spirit_icons_pro/Code.png');
}
.sp_control {
  background-image: url('@/assets/images/spirit_icons_pro/Control.png');
}
.sp_education {
  background-image: url('@/assets/images/spirit_icons_pro/Education.png');
}

.sp_home {
  background-image: url('@/assets/images/spirit_icons_pro/Home.png');
}

.sp_link {
  background-image: url('@/assets/images/spirit_icons_pro/Link.png');
}

.sp_lock {
  background-image: url('@/assets/images/spirit_icons_pro/Lock.png');
}

.sp_medicine {
  background-image: url('@/assets/images/spirit_icons_pro/Medicine.png');
}

.sp_menu {
  background-image: url('@/assets/images/spirit_icons_pro/Menu.png');
}

.sp_pay {
  background-image: url('@/assets/images/spirit_icons_pro/Pay.png');
}

.sp_plane {
  background-image: url('@/assets/images/spirit_icons_pro/Plane.png');
}

.sp_record {
  background-image: url('@/assets/images/spirit_icons_pro/Record.png');
}

.sp_robot {
  background-image: url('@/assets/images/spirit_icons_pro/Robot.png');
}

.sp_sale {
  background-image: url('@/assets/images/spirit_icons_pro/Sale.png');
}

.sp_service {
  background-image: url('@/assets/images/spirit_icons_pro/Service.png');
}

.sp_share {
  background-image: url('@/assets/images/spirit_icons_pro/Share.png');
}

.sp_data {
  background-image: url('@/assets/images/spirit_icons_pro/Data.png');
}

.sp_translation {
  background-image: url('@/assets/images/spirit_icons_pro/Translation.png');
}

.sp_user {
  background-image: url('@/assets/images/spirit_icons_pro/User.png');
}
